<template>
  <div>
    <HeadTag :tagName="tagName" :curTag="curTag"></HeadTag>
    <el-divider></el-divider>
    <Search :searchTable="searchTable" :showSearch="showSearch"></Search>
    <el-button type="primary" @click="getAnnouncement">重置</el-button>
    <el-button type="primary" @click="showAddAnnouncement">新增公告</el-button>
    <Table :tHead="tHead" :tBody="tBody" :tButton="tButton"></Table>
    <!-- 修改框 -->
    <el-dialog title="修改公告信息" align="center" :visible.sync="changeDialogVisible" width="30%">
      <el-form :model="changeForm" :rules="changeRules" ref="changeRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="公告编号:" prop="n_number">
          <el-input v-model="changeForm.n_number" disabled></el-input>
        </el-form-item>
        <el-form-item label="公告标题:" prop="n_title">
          <el-input v-model="changeForm.n_title"></el-input>
        </el-form-item>
        <el-form-item label="公告内容:" prop="n_content">
          <el-input v-model="changeForm.n_content" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="发布时间:" prop="n_pubdate">
          <el-input v-model="changeForm.n_pubdate" disabled></el-input>
        </el-form-item>
        <el-form-item label="发布人:" prop="u_account">
          <el-input v-model="changeForm.u_account" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeAnnouncement">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 增加框 -->
    <el-dialog title="添加公告" align="center" :visible.sync="addDialogVisible" width="30%">
      <el-form :model="addForm" :rules="addRules" ref="addRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="公告标题:" prop="n_title">
          <el-input v-model="addForm.n_title"></el-input>
        </el-form-item>
        <el-form-item label="公告内容:" prop="n_content">
          <el-input v-model="addForm.n_content" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAnnouncement">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tagName: [],
      curTag: '公告管理',
      //Table属性
      tHead: [
        {
          prop: 'n_number',
          label: '公告编号'
        },
        {
          prop: 'n_title',
          label: '公告标题'
        },
        {
          prop: 'n_content',
          label: '公告内容'
        },
        {
          prop: 'n_pubdate',
          label: '发布时间'
        },
        {
          prop: 'u_account',
          label: '发布人'
        },
      ],
      tBody: [],
      tButton: [
        {
          content: '修改',
          type: 'success',
          method: this.changeRow
        },
        {
          content: '删除',
          type: 'danger',
          method: this.deleteRow
        },
      ],
      //修改框
      changeDialogVisible: false,
      changeForm: {},
      changeRules: {
        n_title: [
          { required: true, message: '请输入公告标题', trigger: 'blur' },
        ],
        n_content: [
          { required: true, message: '请输入公告内容', trigger: 'blur' },
        ]
      },
      changeInfo: {
        n_id: '',
        n_title: '',
        n_content: '',
      },
      //搜索
      showSearch: {
        input: true,
      },
      // 新增
      addDialogVisible: false,
      addForm: {
        n_title: '',
        n_content: '',
        n_user_id: '',
        n_pubdate: ''
      },
      addRules: {
        n_title: [
          { required: true, message: '请输入公告标题', trigger: 'blur' },
        ],
        n_content: [
          { required: true, message: '请输入公告内容', trigger: 'blur' },
        ]
      },
    };
  },
  methods: {
    //table操作
    changeRow (row) {
      this.changeForm = JSON.parse(JSON.stringify(row))
      this.changeDialogVisible = true
    },
    deleteRow (row) {
      this.deleteAnnouncement(row.n_id)
    },
    async getAnnouncement () {
      const result = await this.$http.get('/getAnnouncement')
      this.tBody = result.data
      this.tBody.forEach((val) => {
        val.n_pubdate = this.$formatDate(val.n_pubdate)
      })
    },
    showAddAnnouncement () {
      this.addDialogVisible = true
    },
    addAnnouncement () {
      this.$refs.addRef.validate(async (valid) => {
        if (valid) {
          this.addForm.n_user_id = this.$store.state.userInfo.userId
          let a = new Date()
          let b = this.$formatDate(a)
          this.addForm.n_pubdate = b
          const result = await this.$http.post('/addAnnouncement', this.addForm)
          if (result.status !== 200) return this.$message.error(result.message)
          this.getAnnouncement()
          this.$message.success('新增成功!')
          this.addDialogVisible = false
          this.addForm = {
            n_title: '',
            n_content: '',
            n_user_id: '',
            n_pubdate: ''
          }
        }
      });
    },
    deleteAnnouncement (id) {
      this.$confirm('此操作将永久删除该公告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const result = await this.$http.post('/deleteAnnouncement', { n_id: id })
        if (result.status !== 200) return this.$message.error('删除失败!')
        this.getAnnouncement()
        this.$message.success('删除成功!')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    changeAnnouncement () {
      this.$refs.changeRef.validate(async (valid) => {
        if (valid) {
          this.changeInfo.n_title = this.changeForm.n_title
          this.changeInfo.n_content = this.changeForm.n_content
          this.changeInfo.n_id = this.changeForm.n_id
          const result = await this.$http.post('/changeAnnouncement', this.changeInfo)
          if (result.status !== 200) return this.$message.error('修改失败!')
          this.getAnnouncement()
          this.$message.success('修改成功!')
          this.changeDialogVisible = false
        }
      });
    },
    //搜索
    async searchTable (val) {
      const result = await this.$http.post('/searchAnnouncement', { n_title: val })
      if (result.status !== 200) return this.$message.error('查询失败!')
      if (!result.data.length) return this.$message.warning('没有该公告!')
      this.tBody = result.data
      this.$message.success('查询成功')
    }
  },
  created () {
    this.$store.commit('addTag', { name: '公告管理', router: 'announcement' })
    this.tagName = this.$store.state.tagNames
    this.getAnnouncement()
  },
};
</script>

<style scoped>

</style>
